`
<template>
  <div>
    <a-drawer :width="700"
              :visible="parentVisible" @close="handleCancel">
      <div class="content-card">
        <div class="tabs common">
          <venting :venting-comp="ventingComp" @closeVentDrawer="closeVentDrawer"/>
          <comment-talk @closeCommentModal="closeCommentModal" :visible="commentTalk.visible"
                        :talk-id="commentTalk.talkId"></comment-talk>
          <backComment @closeBackComment="closeBackComment" :target-user-id="backCommentInfo.targetUserId"
                       :comment-id="backCommentInfo.commentId" :visible="backCommentInfo.visible"></backComment>
          <div class="tuijian">
            <hr>
            <a-card v-for="(item,index) in commonObj.talkNewList" class="common-pl" :key="index+'card'">
              <!-- 说说内容-->
              <div>
                <div class="avatar-top">
                  <div class="avatar">
                    <a-avatar style="margin: 5px 0" class="common-avatar" :src="item.xyUserEntity.userAva"/>
                  </div>
                  <div class="avatar-info">
                    <h3>{{ item.xyUserEntity.userNick }}</h3>
                    <p> {{ item.createTime }}</p>
                  </div>
                </div>
                <!--                            文字描述模块-->
                <div class="x-info">
                  <p>{{ item.content }}</p>
                </div>
                <!-- 图片或者视频区域 只展示9个  使用flex布局-->
                <div class="imgs">
                  <img style="border-right: 3px white solid;border-bottom: 3px white solid;"
                       v-for="(imgItem,index) in item.xyImages"
                       :key="index+'img'"
                       :width="222"
                       :height="300"
                       :src="imgItem.imgSrc"/>
                </div>
                <!-- 底部点赞模块-->
                <div class="x-footer">
                  <p>浏览{{ item.count == null ? "0" : item.count }}次</p>
                  <!--                    //输入评论内容的模块-->
                  <div class="x-btn">
                    <div :class="[item.isSc?'sc':'nsc']" @click="scTalk(item)"></div>
                    <div @click="commentTalkM(item)"></div>
                    <div v-bind:class="[item.isDz?'dz':'ndz']" @click="dianZan(item)"></div>
                  </div>
                </div>
                <div class="user-list">
                  <a v-for="(dzUser,index) in item.userEntityDzTalkRes" @click.prevent="dzXQInfo(dzUser)"
                     :key="index+'dz'" href="#">
                    {{ dzUser.userNick }}
                  </a>
                </div>
                <div v-show="item.xyCommentResponseList.length>0" class="user-pl">
                  <p v-show="!item.isShowPl" @click="item.isShowPl=true">
                      <span class="closeComment">展开剩余{{
                          item.xyCommentResponseList.length
                        }}条评论</span></p>
                  <p v-show="item.isShowPl" @click="item.isShowPl=false" class="showComment">
                    <span class="closeComment">收起评论</span>
                  </p>
                  <br>
                  <div v-for="(comment,index) in item.xyCommentResponseList" :key="index+'comment'">
                    <div style="height: 70px;" :class="[item.isShowPl==true?'show':'hidden']">
                      <div class="user-pl-avatar">
                        <a-avatar style="margin: 10px 0" class="common-avatar"
                                  :src="comment.xyUserEntity.userAva"/>
                      </div>
                      <div class="user-avatar-info">
                          <span class="user-talk-p">{{
                              comment.xyUserEntity.userNick
                            }} &nbsp;:</span><span>{{ comment.comment }}</span>
                        <p>{{ comment.createTime }} <span @click="backComment(comment)">回复</span></p>
                      </div>
                    </div>
                    <div v-for="(back,index) in comment.xyBackCommentResponses"
                         :class="[item.isShowPl==true?'common-pl-list':'common-pl-list-hidden']">
                      <div class="user-pl-avatar">
                        <a-avatar class="common-avatar" style="margin: 10px 0"
                                  :src="back.backUser.userAva"/>
                      </div>
                      <div class="user-avatar-info">
                        <span class="user-talk-p">{{ back.backUser.userNick }} &nbsp;:&nbsp;</span>回复 <span
                          class="user-talk-p">{{ back.targetUser.userNick }}</span> :<span>{{
                          back.backInfo
                        }}</span>
                        <p>{{ back.createTime }} <span @click="backComment(comment,back)">回复</span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import commentTalk from "@/components/index/commentTalk";
import backComment from "@/components/index/backComment";
import navHeader from "@/components/navHeader/navHeader";
import venting from "@/components/index/venting";
import $httpPost from "@/api/myAxios/PostApi";
import {computed, reactive, ref} from "vue";
import {useStore} from "vuex";
import $httpGet from "@/api/myAxios/GetApi";
import {message} from "ant-design-vue";

export default {
  name: "userSelfTalk",
  components: {
    commentTalk, backComment, navHeader, venting
  },
  props: ['parentVisible'],
  data() {
    return {
      activeKey: "1",
      searchText: "",
      ventingComp: false,
      commentTalk: {
        talkId: 0,
        visible: false,
        item: null
      },
      backCommentInfo: {
        item: null,
        commentId: 0,
        backUser: {
          userId: 0,
          userNick: ''
        },
        targetUserId: 0,
        visible: false,
        targetUser: {}
      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit('closeUserSelfTalk')
    },
    initData(id) {
      console.log(id)
      $httpGet(`/xy/talk/selfTalk?talkId=${id}`).then(async res => {
        this.commonObj.talkNewList = await res.data.talkList.map(item => {
          item.isShowPl = false;
          return item;
        })
      })
    },
    closeVentDrawer() {
      this.ventingComp = false
    },
    backComment(item, back) {
      this.backCommentInfo.item = item
      this.backCommentInfo.commentId = item.id
      //当我点击回复人的时候  item还是item  只是这个时候 我们传进一个新的值 为back 获取back的数据即可
      if (back != null) {
        this.backCommentInfo.targetUser = back.backUser
        this.backCommentInfo.targetUserId = back.backUser.userId
      } else {
        this.backCommentInfo.targetUserId = item.xyUserEntity.userId
        this.backCommentInfo.targetUser = item.xyUserEntity
      }
      this.backCommentInfo.visible = true
    },
    closeBackComment(childData) {
      if (childData.typeStatus) {
        //执行push
        let obj = {
          backId: this.userinfo.userId,
          backInfo: childData.backInfo,
          backUser: this.userinfo,
          commentId: this.backCommentInfo.commentId,
          id: childData.id,
          targetUser: this.backCommentInfo.targetUser,
          createTime: childData.createTime
        }

        this.backCommentInfo.item.xyBackCommentResponses.push(obj)
        this.backCommentInfo.visible = false
      } else {
        this.backCommentInfo.visible = false
      }
    },
    closeCommentModal(childData) {
      if (childData.comment != '') {
        let obj = {
          xyUserEntity: this.userinfo,
          comment: childData.comment,
          talkId: this.commentTalk.talkId,
          userId: this.userinfo.userId,
          createTime: childData.createTime
        }
        this.commentTalk.item.xyCommentResponseList.push(obj)
        this.commentTalk.talkId = 0
        this.commentTalk.visible = false
      }
      this.commentTalk.visible = false
    },
    //点赞让弹框显示
    commentTalkM(item) {
      this.commentTalk.talkId = item.id
      this.commentTalk.visible = true
      this.commentTalk.item = item
    },
    scTalk(item) {
      let obj = {talkId: item.id}
      if (item.isSc) {
        $httpPost("/xy/sc/cancelScTalk", obj).then(res => {
          console.log(res)
        })
      } else {
        $httpPost("/xy/sc/scTalk", obj).then(res => {
          console.log(res)
        })
      }
      item.isSc = !item.isSc
    },
    dianZan(item) {
      let obj = {talkId: item.id}
      //是点赞的情况下 发送取消点赞
      if (item.isDz) {
        $httpPost("/xy/dz/cancelDz", obj).then(res => {
          console.log(res)
        })
      } else {
        $httpPost("/xy/dz/like", obj).then(res => {
          console.log(res)
        })
      }
      item.isDz = !item.isDz
    },
    login() {
      window.location.href = "login"
    },
  },
  setup() {
    let commonObj = reactive({
      talkNewListL: [],
    })

    let isDianZan = ref(false)
    let store = useStore()
    return {
      commonObj,
      isDianZan,
      userinfo: computed(() => {
        return store.getters.getUser
      }),
    }
  },
}
</script>
<style scoped>
.show {
  float: left;
  display: block;
  width: 100%;
}

.hidden {
  display: none;
}

.loading-data {
  position: relative;
  left: 0;
  bottom: 0;
  width: 25px;
  height: 20px;
  margin: 0 auto;
}


img {
  vertical-align: top;
}


a {
  text-decoration: none;
}

.closeComment {
  float: left;
  color: rgb(41, 92, 157);
  font-size: 14px;
}

.closeComment:hover {
  cursor: pointer;
  border-bottom: 1px rgb(41, 92, 157) solid;
}

header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: rgb(254, 248, 231);
  z-index: 20;
}

.common-avatar {

  height: 50px;
}

.common {
  margin: 0 auto;
}


.content-card {
  margin-top: 10px;
}


.tuijian {
  margin: 0 auto;
}

.avatar {
  float: left;
}

.avatar-info h3 {
  margin-top: 9px;
  font-weight: 400;
  font-size: 15px;
}

.avatar-info p {
  font-size: 10px;
}

.avatar-top {
  position: relative;
  height: 60px;
}

.avatar-info {
  float: left;
  margin-left: 5px;
}

.x-info {
  float: left;
  width: 100%;
  height: 20px;
  font-size: 15px;
  margin-bottom: 20px;
}

/*.content-card .imgs div.aimg {*/
/*  width: 219px !important;*/
/*  margin-bottom: 5px !important;*/
/*  margin-left: 2px !important;*/
/*}*/

.x-footer {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e7e7e7;
}

.x-footer p {
  font-size: 16px;
  line-height: 60px;
  float: left;
  color: #A9A9A9;
}

.x-footer .x-btn div {
  float: right;
  margin: 18px 30px;
  width: 24px;
  height: 24px;

}

.x-footer .x-btn div:hover {
  cursor: pointer;
}

.x-btn div:nth-child(3) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.x-btn div:nth-child(3):hover {
  background-image: url("http://localhost:8080/images/点赞_块-hover.png");
}

.x-btn .ndz {
  background-image: url("http://localhost:8080/images/点赞_块.png")
}

.x-btn .dz {
  background-image: url("http://localhost:8080/images/点赞_块-hover.png");
}

.x-btn div:nth-child(2) {
  background: url("http://localhost:8080/images/评论.png") no-repeat center;
  background-size: 24px 24px;

}

.x-btn div:nth-child(2):hover {
  background-image: url("http://localhost:8080/images/评论-hover.png");
}

/*2c4ef3*/
.x-btn div:nth-child(1) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  margin-right: 0;
}

.x-btn div:nth-child(1):hover {
  background-image: url("http://localhost:8080/images/收藏-hover.png");
}

.x-btn .sc {
  background-image: url("http://localhost:8080/images/收藏-hover.png");
}

.x-btn .nsc {
  background-image: url("http://localhost:8080/images/收藏.png");
}

.user-list {
  float: left;
  width: 100%;
  height: 60px;
}

.user-list a:hover {
  text-decoration: underline;
}

.user-list:before {
  width: 20px;
  height: 20px;
  position: absolute;
  content: "";
  background-image: url("http://localhost:8080/images/点赞-talk.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-color: blue;
  border-radius: 50%;
}

.user-list a:nth-child(n) {
  color: #295c9d;
}

.user-list a:nth-child(n):after {
  position: relative;
  content: "、";
}

.user-list a:last-child:after {
  position: relative;
  content: "";
}

/*.user-list a:last-child:after {*/
/*  position: relative;*/
/*  color: black;*/
/*  content: "等人觉得很赞";*/
/*}*/

.user-list a:first-child {
  margin-left: 25px;
}

.user-pl {
  width: 100%;
}

.user-pl p a {
  color: #295c9d;
  width: 100%;
  float: left;
}

.user-pl p a:hover {
  text-decoration: underline;
}

.user-pl .avatar-info h3 {
  color: #295c9d;
  font-size: 16px;
}

.user-pl .avatar-info {
  position: relative;
}

.user-pl .avatar-info h3 p {
  display: inline-block;
  font-size: 16px;
  color: black;
}

.user-pl .huifu {
  color: black;
}

.common-pl-list {
  float: left;
  margin-left: 100px;
  height: 70px;
  width: 100%;
}

.common-pl-list-hidden {
  display: none;
}

.common-pl {
  padding: 20px 20px;
  margin-bottom: 20px;
}

.user-pl .avatar-info .user-pl-time {
  font-size: 10px;
}

.user-pl-avatar {
  float: left;
}

.user-avatar-info {
  float: left;
}

.user-avatar-info span {
  display: inline-block;
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
}

.user-avatar-info p span {
  font-size: 13px;
  margin-left: 15px;
  color: #A9A9A9;
}

.user-avatar-info p span:hover {
  text-decoration: underline;
  cursor: pointer;
}

.user-avatar-info p {
  font-size: 10px;
  margin-bottom: 0;
}

.user-avatar-info .user-talk-p {
  color: #295c9d;
}

.tuijian .search-tuijian {
  height: 50px;
  width: 500px;
  margin: 0 auto;
}


.tuijian .common-pl .avatar-gz {
  position: absolute;
  left: 113px;
  top: 10px;
  width: 32px;
  height: 32px;
  background-size: 32px;

}

.tuijian .common-pl .avatar-ngz {
  background: url("http://localhost:8080/images/未关注.png") no-repeat;
}

.tuijian .common-pl .avatar-gzt {
  background-image: url("http://localhost:8080/images/我的关注.png");
  left: 86px;
}

.avatar-gz .no-gz, .avatar-gz .gz {
  float: left;
  width: 100px;
  cursor: pointer;
  margin-left: 35px;
}

.avatar-gz .no-gz:hover, .avatar-gz .gz:hover {
  text-decoration: underline;
}

.avatar-gz .no-gz {
  color: slategray;
}

.avatar-gz .gz {
  color: red;
}

</style>